<template>
    <div class="footerMusic" @click="gengxingLyric">
       <div class="footLeft" @click="updateDetailShow" >
         <img :src="playList[playListIndex].al.picUrl" alt="">
         <div>
            <marquee class="ppp" behavior="" direction="">{{playList[playListIndex].al.name}}</marquee>
            <p></p>
            <span>横滑切换上下首哦</span>
         </div>
       </div>
       <div class="footRight">
        <span class="iconfont" >
            <svg @click="play" class="icon bofang" aria-hidden="true" >
            <use :xlink:href="[isbtnShow ? '#icon-bofang' : '#icon-zanting']" > </use>    
          </svg></span>
          <!-- <svg @click="play" class="icon bofang" aria-hidden="true"   v-if="isbtnShow" >
           <use xlink:href="#icon-bofang" ></use>
        </svg>
        <svg @click="play" class="icon zanting" aria-hidden="true" v-else>
           <use xlink:href="#icon-zanting" ></use>
        </svg> -->
        
        
        <svg class="icon bofang" aria-hidden="true" >
           <use xlink:href="#icon-menu"></use>
        </svg>
       </div>
       <audio ref="audio" :src="`https://music.163.com/song/media/outer/url?id=${playList[playListIndex].id}.mp3`"></audio>
       <!-- <van-popup v-model:detailShow="detailShow"  position="right" :style="{ height: '30%' }" /> -->
       <!-- :detailShow去掉 vuex v-model是双向 不能用:value是单向 -->
     
       <van-popup  class="playthe" z-index="9999"   :value="detailShow" position="right" :style="{ height: '100%',width:'100%' }" >
        <MusicDetailVue class="musicDetail" :addDuration = "addDuration" :musicList="playList[playListIndex]" :play="play" :isbtnShow="isbtnShow"></MusicDetailVue>  
      </van-popup>
    
    </div>
</template>

<script>
 
 //引用播放页面
import MusicDetailVue from './MusicDetail.vue'
 

 import { mapMutations, mapState } from 'vuex'; 
import ThefcVue from '../../../../../11-28learnVuex/fisday/src/views/Thefc.vue';
    export default {
        name:"FooterMusic",
        //解构一下
        computed:{
            //辅助函数进行解构
            ...mapState(['playList','playListIndex','isbtnShow','detailShow'])
        },
        components:{
            MusicDetailVue
        },
        mounted(){
            //渲染的时候也要掉用
            this.mygetLyric(this.playList[this.playListIndex].id);
            this.$store.dispatch("getLyric",this.playList[this.playListIndex].id)
            // console.log(this.$refs);
            //歌词在播放外也要滚动
            // this.updatedTime()
        },
        data(){
            return{
              getLyric:[],
              allLyric:[], 
              //定义时间  
              interVal:0, 
            }
        },
        //歌词生命周期钩子
        created() {
           this.mygetLyric(this.playList[this.playListIndex].id);
        //    this.getSonggedan(singerId);
        },
        //随时有歌随时传歌词 
        updated(){
        this.gengxingLyric()
           this.mygetLyric(this.playList[this.playListIndex].id);
            // this.$store.dispatch("getLyric",this.playList[this.playListIndex].id)
           this.addDuration()
          },
        // beforeCreate:{
            
        // },
        methods:{
        //     back:function() {
        //       this.$router.back();
        //  },

        //添加一个总时长
        addDuration:function(){
          this.updateDuration(this.$refs.audio.duration)
        },
            
            //改变时间的一个方法
            updatedTime:function(){
              this.interVal= setInterval(() => {
                this.updateCurrentTime(this.$refs.audio.currentTime)
               }, 30); 
            },
           gengxingLyric(){
             this.gettheLyricone(this.allLyric)
           },

           backplay:function() { 
                //判断音乐是否播放
                
              if (this.$refs.audio.paused) { //有d是已经暂停
                //再次点击暂停
                this.$refs.audio.pause()
                this.updateIsbtnShow(true)
                
                //清除定时器
                clearInterval(this.interVal)
              }else{
                this.$refs.audio.pause()
                this.updateIsbtnShow(true)
                
                //清除定时器
                clearInterval(this.interVal)
              }
            },
           play:function() { 
                //判断音乐是否播放
                
              if (this.$refs.audio.paused) { //有d是已经暂停
                this.$refs.audio.play();
                this.updateIsbtnShow(false)
                //播放调用函数传值
                this.updatedTime()
              }else{
                //再次点击暂停
                this.$refs.audio.pause()
                this.updateIsbtnShow(true)
                
                //清除定时器
                clearInterval(this.interVal)
              }
            },
            //方法解构
            ...mapMutations(['Isback','duration','updateDuration','gettheLyricone','updateCurrentTime','updateIsbtnShow','updateDetailShow']),
         
         mygetLyric(singerId){
            this.axios({
            method:"get",
            url:`/lyric?id=${singerId}`,
            params:{
            //  id=33894312
            },
         }).then(res => {
         console.log("res==>",res);
          this.getLyric = res
          this.allLyric = res.data.lrc
        console.log("全局歌词==>",this.allLyric);
        console.log("this.getLyric获取歌词==>",this.getLyric);
        }).catch(err => {
        console.log("err==>",err);
      })
    },
       
        },
        watch:{
            //播放音乐 自动播放音乐 autoplay改变先给它一个true
            playListIndex(){
                //监听如果下标发生了改变,就自动播放音乐
                this.$refs.audio.autoplay = true;
                //图标也要更改一下 如果是暂停状态
                if(this.$refs.audio.pause){ 
               //本来是一个暂停状态 点击了之后进行播放然后改变图标
                    this.updateIsbtnShow(false)
                }
            },
            //开始播放的第一首有问题下标相同 不监听下标 改监听播放列表
           //监听播放列表
            playList(){
                if(this.isbtnShow){ //暂停状态时为true
                    this.$refs.audio.autoplay = true;
                    this.updateIsbtnShow(false)
                }
             }
        }
    }
</script>

<style lang="less" scoped>
   .footerMusic{
    z-index: 6;
    .musicDetail{
        z-index: 99999;
    }
    /deep/ .van-popup{
        z-index: 2;
    }
   /deep/ .van-tabbar{
    z-index: -1;
   }
    width: 96%;
    // height: 60px;
    background-color: rgb(206, 202, 202);
    border-radius: 60px;
    margin: 0 6px;
    position: fixed;
    bottom: 50px;
    border-top: 1px solid rgb(169, 164, 164);
    display: flex;
    justify-content: space-between;
    align-items: center;
    // margin: 10px;
    // z-index: -1;
    .footLeft{
       
        width: 70%;
        height: 100%;
        display: flex;
        align-items: center;

        img{
            //  margin: 0 10px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: block;

        }
        .ppp{
            // margin: 0 0 6px 0;
            font-size: medium;
            font-weight: 600;
            width: 100px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;  
        }
       
        span{
            font-weight: 600;
        }
    }
    .footRight{
        margin-right: 10px;
        width: 20%;
        height: 100%;
        justify-content: space-between;
        display: flex;
        align-items: center;
        .icon{
            width: 30px;
            height: 30px;
        }
    }
    // .playpage{
    //    .playthe{
    //     z-index: 99;
    //    }
    // }
   }
</style>